<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-ui.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/slide.js}"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

<!-- 顶部导航 -->
<header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-2 flex justify-between items-center">
        <div>
            <a href="/" class="text-xl font-bold text-indigo-600"></a>
        </div>
        <div th:if="${session.uaccount} ne null" class="flex items-center space-x-4 text-sm">
            <span>欢迎您：<em th:text="${session.uaccount}" class="text-indigo-600 font-semibold"></em></span>
            <a href="/goods/cartAll" class="hover:text-indigo-600">我的购物车</a>
            <a href="/goods/getAllorder" class="hover:text-indigo-600">我的订单</a>
            <a href="http://localhost:8896/goods/quit" class="hover:text-red-600">退出</a>
        </div>
        <div th:if="${session.uaccount} eq null">
            <a href="http://localhost:8893/admin/tologin" class="text-indigo-600 hover:underline">请您登陆</a>
        </div>
    </div>
</header>

<!-- 搜索区域 -->
<section class="bg-white py-4 shadow-sm">
    <div class="max-w-7xl mx-auto flex items-center justify-between px-4">
        <a th:href="@{'getAll?uaccount='+${session.uaccount}}" class="flex-shrink-0">
        </a>
        <form action="/goods/getOne" method="get" class="flex w-1/2">
            <input type="text" name="name" placeholder="搜索商品"
                   class="w-full px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-400">
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700">搜索</button>
        </form>
    </div>
</section>

<!-- 分类导航 -->
<nav class="bg-indigo-600 text-white py-3">
    <div class="max-w-7xl mx-auto px-4 flex items-center space-x-6">
        <span class="font-semibold text-lg">全部商品分类</span>
        <a href="#" class="hover:underline">首页</a>
    </div>
</nav>

<!-- 主体内容 -->
<main class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-12 gap-6">
    <!-- 轮播图 -->
    <section class="col-span-7">
        <div class="relative overflow-hidden rounded-lg shadow-lg">
            <ul class="flex transition-transform duration-500 ease-in-out" style="width: 400%;">
                <li><img src="http://localhost:8896/img/slide.jpg" class="w-full" alt="幻灯片"></li>
                <li><img src="http://localhost:8896/img/slide02.jpg" class="w-full" alt="幻灯片"></li>
                <li><img src="http://localhost:8896/img/slide03.jpg" class="w-full" alt="幻灯片"></li>
                <li><img src="http://localhost:8896/img/slide04.jpg" class="w-full" alt="幻灯片"></li>
            </ul>
        </div>
    </section>

    <!-- 右侧广告图 -->
    <aside class="col-span-3 space-y-4">
        <a href="#"><img src="http://localhost:8896/img/adv01.jpg" class="rounded-lg shadow"></a>
        <a href="#"><img src="http://localhost:8896/img/adv02.jpg" class="rounded-lg shadow"></a>
    </aside>
</main>

<!-- 商品展示区 -->
<section class="max-w-7xl mx-auto px-4 pb-12">
    <div class="mb-6">
        <h3 class="text-xl font-semibold border-b pb-2 mb-2" id="model06">速冻食品</h3>
        <div class="text-sm text-gray-600 space-x-2 mb-4">
            <span>|</span>
            <a href="#" class="hover:underline">脉动</a>
            <a href="#" class="hover:underline">可乐</a>
            <a href="#" class="hover:underline">冰冻矿泉水</a>
        </div>
        <div class="grid grid-cols-5 gap-4">
            <div class="col-span-1" th:each="goods:${goods1}">
                <input type="checkbox" name="che" th:value="${goods.gid}" style="display:none">
                <a th:href="@{'http://localhost:8896/goods/detail?gid='+${goods.gid}}">
                    <img th:src="${goods.gremain}" alt="商品图" class="w-full h-40 object-cover rounded">
                    <h4 th:text="${goods.gname}" class="mt-2 text-sm font-medium truncate"></h4>
                </a>
                <div th:text="'￥'+${goods.gprice}" class="text-indigo-600 font-bold mt-1"></div>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript" src="http://localhost:8896/js/slideshow.js"></script>
<script>
    BCSlideshow('focuspic');
</script>
</body>
</html>
